<template>
  <div class="customer-dashboard">
    <!-- 主内容区：侧边栏 + 内容 -->
    <div class="dashboard-content">
      <!-- 侧边栏导航 -->
      <div class="sidebar">
        <!-- 侧边栏顶部标题（改为可点击按钮） -->
        <div
          class="sidebar-header"
          @click="handleDashboardClick"
          :class="{ active: isDashboardActive }"
          style="cursor: pointer"
        >
          <h2>客户仪表盘</h2>
          <p>欢迎您，尊贵的客户！</p>
        </div>

        <!-- 侧边栏菜单项 -->
        <div
          class="sidebar-item"
          v-for="(item, index) in functionList"
          :key="index"
          :class="{ active: isActive(item.path) }"
          @click="handleNavigate(item.path)"
        >
          <img :src="item.icon" alt="icon" class="sidebar-icon" />
          <span>{{ item.name }}</span>
        </div>
      </div>

      <!-- 路由内容区 -->
      <div class="content-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { computed } from "vue";

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    // 模拟功能列表
    const functionList = [
      {
        name: "余额查询",
        path: "/CustomerDashboard/balancequery",
        icon: "https://cdn-icons-png.flaticon.com/512/834/834869.png",
      },
      {
        name: "银行卡管理",
        path: "/CustomerDashboard/cardmanagement",
        icon: "https://cdn-icons-png.flaticon.com/512/25/25694.png",
      },
      {
        name: "交易操作",
        path: "/CustomerDashboard/transaction",
        icon: "https://cdn-icons-png.flaticon.com/512/3601/3601179.png",
      },
      {
        name: "交易记录查询",
        path: "/CustomerDashboard/transactionhistory",
        icon: "https://cdn-icons-png.flaticon.com/512/4400/4400064.png",
      },
      {
        name: "转账操作",
        path: "/CustomerDashboard/transfer",
        icon: "https://cdn-icons-png.flaticon.com/512/259/259613.png",
      },
      {
        name: "密码修改",
        path: "/CustomerDashboard/passwordchange",
        icon: "https://cdn-icons-png.flaticon.com/512/2960/2960666.png",
      },
    ];

    // 判断当前路由是否为仪表盘或其子路由
    const isDashboardActive = computed(() => {
      return (
        route.path === "/CustomerDashboard" ||
        route.path.startsWith("/CustomerDashboard/")
      );
    });

    // 处理仪表盘标题点击
    const handleDashboardClick = () => {
      router.push("/CustomerDashboard/customerthing");
    };

    // 判断路由是否激活
    const isActive = (path) => {
      return route.path === path;
    };

    // 处理功能项跳转
    const handleNavigate = (path) => {
      router.push(path);
    };

    return {
      functionList,
      isDashboardActive,
      handleDashboardClick,
      isActive,
      handleNavigate,
    };
  },
};
</script>

<style scoped>
.customer-dashboard {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 60px);
}

.dashboard-content {
  display: flex;
  gap: 20px;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

/* 侧边栏标题样式（可点击） */
.sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.sidebar-header:hover,
.sidebar-header.active {
  background-color: #e6f7ff;
}

.sidebar-header h2 {
  font-size: 20px;
  margin-bottom: 5px;
}

.sidebar-header p {
  font-size: 14px;
  color: #666;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar-item:hover {
  background-color: #f5f7fa;
}

.sidebar-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.sidebar-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

/* 内容区样式 */
.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 500px;
}
</style>
